<template>
  <div class="acount">
    <div class="acount-header">
      <i class="iconfont icon-shield-full">
        <div class="number">89</div>
      </i>
    </div>
    <div class="acount-body">
      <div class="item">
        <div class="title">
          账户
        </div>
        <div class="text">{{ userData.username }}</div>
        <div class="tips"></div>
      </div>
      <div class="item">
        <div class="title">
          密码
        </div>
        <div class="tips-pwd" @click="isShowUpdatePwd = true">修改密码</div>
        <n-modal v-model:show="isShowUpdatePwd">
          <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
            :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
            <h2 class="title">修改密码</h2>
            <n-form class="card-body" :model="pwd" :rules="rules" ref="pwdRef">
              <n-form-item path="lastPassword" class="item">
                <n-input v-model:value="pwd.lastPassword" class="pwdInput" size="small" placeholder="输入旧密码"
                  type="password" clearable show-password-on="mousedown"></n-input>
              </n-form-item>
              <n-form-item path="updatePassword" class="item">
                <n-input v-model:value="pwd.updatePassword" class="pwdInput" size="small" placeholder="输入新密码"
                  type="password" clearable show-password-on="mousedown"></n-input>
              </n-form-item>
              <n-form-item path="reUpdatePassWord" class="item">
                <n-input v-model:value="pwd.reUpdatePassWord" class="pwdInput" size="small" placeholder="确认新密码"
                  type="password" clearable show-password-on="mousedown"></n-input>
              </n-form-item>
            </n-form>
            <div class="card-footer">
              <n-button class="btn" type="primary" size="small" strong secondary @click="handleValidatePWD">确认</n-button>
            </div>
          </n-card>
        </n-modal>
      </div>
      <div class="item">
        <div class="title">
          手机号
        </div>
        <div class="text">{{ userData.phone }}</div>
        <div class="tips" @click="isShowUpdatePhone = true">修改手机</div>
        <n-modal v-model:show="isShowUpdatePhone">
          <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
            :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
            <h2 class="title">修改手机号</h2>
            <n-form class="card-body" :model="phone" :rules="rules2" ref="phoneRef">
              <n-form-item path="lastPhone" class="item">
                <n-input v-model:value="phone.lastPhone" class="pwdInput" size="small" placeholder="输入旧手机号"
                  clearable></n-input>
              </n-form-item>
              <n-form-item path="updatePhone" class="item">
                <n-input v-model:value="phone.updatePhone" class="pwdInput" size="small" placeholder="输入新手机号"
                  clearable></n-input>
              </n-form-item>
              <n-form-item path="password" class="item">
                <n-input v-model:value="phone.password" class="pwdInput" size="small" placeholder="输入账户密码" type="password"
                  clearable show-password-on="mousedown"></n-input>
              </n-form-item>
            </n-form>
            <div class="card-footer">
              <n-button class="btn" type="primary" size="small" strong secondary
                @click="handleValidatePHONE">确认</n-button>
            </div>
          </n-card>
        </n-modal>
      </div>
      <div class="item">
        <div class="title">
          邮箱
        </div>
        <div class="text">{{ userData.email }}</div>
        <div class="tips" @click="isShowUpdateEmail = true">修改邮箱</div>
        <n-modal v-model:show="isShowUpdateEmail">
          <n-card :bordered="false" role="dialog" aria-modal="true" class="card"
            :style="{ 'height': $store.oj.getCardHeight, 'width': $store.oj.getCardWidth }">
            <h2 class="title">修改邮箱</h2>
            <n-form class="card-body" :model="email" :rules="rules3" ref="emailRef">
              <n-form-item path="lastEmail" class="item">
                <n-input v-model:value="email.lastEmail" class="pwdInput" size="small" placeholder="输入旧邮箱"
                  clearable></n-input>
              </n-form-item>
              <n-form-item path="updateEmail" class="item">
                <n-input v-model:value="email.updateEmail" class="pwdInput" size="small" placeholder="输入新邮箱"
                  clearable></n-input>
              </n-form-item>
              <n-form-item path="password" class="item">
                <n-input v-model:value="email.password" class="pwdInput" size="small" placeholder="输入账户密码" type="password"
                  clearable show-password-on="mousedown"></n-input>
              </n-form-item>
            </n-form>
            <div class="card-footer">
              <n-button class="btn" type="primary" size="small" strong secondary
                @click="handleValidateEMAIL">确认</n-button>
            </div>
          </n-card>
        </n-modal>
      </div>
    </div>
  </div>
</template>

<script>
import { updatePwdAPI, updateUserPhoneAPI, updateUserEmailAPI, userInfoAPI } from "@/api/ojAPI/ojAPI"
import { ElMessage } from 'element-plus'
import { defineComponent, onMounted, reactive, ref } from "vue"
import { useRouter } from "vue-router"
import useStore from "@/store"

export default defineComponent({
  setup () {
    onMounted(() => {
      getUserInfo()
    })
    const router = useRouter()
    const store = useStore()


    //获取用户信息
    const getUserInfo = async () => {
      await userInfoAPI().then((res) => {
        if (res.data.code === 200) {
          Object.assign(userData, res.data.data)
          store.oj.updateUserData(res.data.data)
        }
      }).catch((err) => {
        console.log(err)
      })
    }

    //账户密码
    const pwdRef = ref(null)
    const pwd = reactive({
      lastPassword: '',
      updatePassword: '',
      reUpdatePassWord: ''
    })
    const isShowUpdatePwd = ref(false)
    const updatePwd = async () => {
      await updatePwdAPI(pwd).then(res => {
        if (res.data.code === 200) {
          ElMessage.success("修改成功")
          Object.assign(pwd, {
            lastPassword: '',
            updatePassword: '',
            reUpdatePassWord: ''
          })
          isShowUpdatePwd.value = false
          localStorage.clear()
          store.oj.clearUserData()
          router.push({
            path: '/home'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
    const rules = {
      lastPassword: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入旧密码")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
      updatePassword: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入新密码")
            }
            if (value.length < 8) {
              return new Error("密码至少8位")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
      reUpdatePassWord: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入确认密码")
            }
            if (pwd.updatePassword != pwd.reUpdatePassWord) {
              return new Error("两次输入密码不一致")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
    }
    const handleValidatePWD = (e) => {
      e.preventDefault()
      pwdRef.value.validate((errors) => {
        if (!errors) {
          updatePwd()
        } else {
          console.log(errors)
        }
      })
    }

    //账户信息
    const userData = reactive({})

    //账户手机号
    const phoneRef = ref(null)
    const isShowUpdatePhone = ref(false)
    const phone = reactive({
      lastPhone: '',
      updatePhone: '',
      password: ''
    })
    const updatePhone = async () => {
      await updateUserPhoneAPI(phone).then(res => {
        if (res.data.code === 200) {
          getUserInfo()
          ElMessage.success("修改成功")
          Object.assign(phone, {
            lastPhone: '',
            updatePhone: '',
            password: ''
          })
          isShowUpdatePhone.value = false
        }
      }).catch(err => {
        console.log(err)
      })
    }
    const rules2 = {
      lastPhone: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入旧手机号")
            }
            if (value.length != 11) {
              return new Error("请输入正确旧手机号")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
      updatePhone: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入新手机号")
            }
            if (value.length != 11) {
              return new Error("请输入正确新手机号")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
      password: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入密码")
            }
            if (value.length < 8) {
              return new Error("密码至少8位")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ]
    }
    const handleValidatePHONE = (e) => {
      e.preventDefault()
      phoneRef.value.validate((errors) => {
        if (!errors) {
          updatePhone()
        } else {
          console.log(errors)
        }
      })
    }


    //账户邮箱
    const emailRef = ref(null)
    const isShowUpdateEmail = ref(false)
    const email = reactive({
      password: '',
      lastEmail: '',
      updateEmail: ''
    })
    const updateUserEmail = async () => {
      await updateUserEmailAPI(email).then(res => {
        if (res.data.code === 200) {
          getUserInfo()
          ElMessage.success("修改成功")
          Object.assign(email, {
            password: '',
            lastEmail: '',
            updateEmail: ''
          })
          isShowUpdateEmail.value = false
        }
      }).catch(err => {
        console.log(err)
      })
    }
    const rules3 = {
      lastEmail: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入旧邮箱")
            }
            if (!value.includes('@')) {
              return new Error("请输入正确邮箱号")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
      updateEmail: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入新邮箱")
            }
            if (!value.includes('@')) {
              return new Error("请输入正确邮箱号")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ],
      password: [
        {
          required: true,
          validator (rule, value) {
            if (!value) {
              return new Error("请输入密码")
            }
            if (value.length < 8) {
              return new Error("密码至少8位")
            }
            return true
          },
          trigger: ["input", "blur"]
        }
      ]
    }
    const handleValidateEMAIL = (e) => {
      e.preventDefault()
      emailRef.value.validate((errors) => {
        if (!errors) {
          updateUserEmail()
        } else {
          console.log(errors)
        }
      })
    }

    return {
      userData,
      isShowUpdatePwd,
      isShowUpdatePhone,
      isShowUpdateEmail,
      pwd,
      pwdRef,
      phoneRef,
      emailRef,
      phone,
      rules,
      rules2,
      rules3,
      email,
      handleValidatePWD,
      handleValidatePHONE,
      handleValidateEMAIL
    }
  }
})
</script>

<style lang="less" scoped>
.acount {
  .acount-header {
    width: 100%;
    height: 200px;
    display: flex;
    border-bottom: 5px solid #888;
    background: linear-gradient(180deg, rgb(250, 219, 213), rgb(246, 241, 241));

    .iconfont {
      font-size: 100px;
      margin: auto;
      opacity: 0.7;
      color: rgb(222, 163, 100);
      position: relative;

      .number {
        font-weight: normal;
        font-size: 30px;
        position: absolute;
        color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        user-select: none;
      }
    }
  }

  .acount-body {
    width: 100%;
    display: flex;
    flex-direction: column;

    .item {
      width: 98%;
      border-bottom: 1px solid rgb(240, 240, 245);
      margin: 0 auto;
      height: 50px;
      line-height: 50px;
      display: flex;

      .title {
        width: 5%;
        font-size: 16px;
        text-align: justify;
        text-align-last: justify;
        margin: auto 15px;
        color: #555666;
      }

      .text {
        margin: auto 80px auto auto;
        color: #888;
      }

      .tips {
        margin: auto 0 auto 0;
        color: rgb(60, 137, 252);
        text-align: center;
        width: 10%;
      }

      .tips-pwd {
        margin: auto 0 auto auto;
        color: rgb(60, 137, 252);
        text-align: center;
        width: 10%;
      }

    }
  }
}

.card {
  border-radius: 20px;
  display: flex;
  flex-direction: column;

  .title {
    text-align: center;
    border-bottom: 1px solid rgb(240, 240, 245);
  }

  .card-body {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .item {
      height: 50px;
      width: 50%;
      margin: 5px auto;

      ::v-deep(.n-form-item-feedback__line) {
        font-size: 12px !important;
      }
    }



  }

  .card-footer {
    display: flex;
    margin: auto 0 0 0;

    .btn {
      width: 100px;
      margin: auto;
    }
  }
}

::v-deep(.n-card__content) {
  padding: 10px !important;
}
</style>